<template>
  <div class="header">
    <h1>header</h1>
    <p>count{{ this.$store.state.count }},电影的列表总长度是{{movieList.length}}</p>
    <p>{{ count }}</p>
    <p>{{ price }}</p>
    <button @click='increment'>累加count的值</button>
    <button @click='incrementN({n:3})'>count的值累加n</button>
    <button @click='incrementWait'>等一会再加</button>
    <button @click='incrementWait()'>等一会再加n</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "Header",
  mounted() {

  },
  computed: {
    //直接使用mapState去获取store中的值,并且提供了计算属性给我们,我们展开放在computed中
    ...mapState(["count", "price",'movieList']),
  },
  methods:{
    // ...mapMutations(['increment','incrementN']),
    ...mapMutations({increment:'increment',incrementN:'incrementN'}),

    incrementWait(){
      this.$store.dispatch('incrementWait')
    },
    incrementNWait({n}){
      this.$store.dispatch('incrementNWait',{n})
    }
  }
};
</script>

<style>
.header {
  margin: 30px;
  background: yellowgreen;
}
</style>